<script setup lang="ts">
//移动端菜单
import { ref, computed, watchEffect } from "vue";

import Down from "@/assets/down.svg";
import Img from "@/components/block/img.vue";
import MenuTag from "@/components/block/menuTag.vue";

import { Menu } from "@/store/interface.ts";

import { addLocal, readLocal, getSizeColor } from "@/store/store";
import { dataLocal } from "@/store/store.ts";

const props = defineProps<{ data: Menu; fatherSwitchActive: Function }>();

//将当前选中菜单ID数组存储进浏览器
const transfer = (a: string, b: string) => {
  addLocal([a, b]);
};

//控制子菜单是否显示
const active = ref(false);
//拿到当前菜单状态
watchEffect(() => {
  active.value = props.data.active ?? false;
});

//更改状态
const switchActive = () => {
  active.value = !active.value;
};

//文字颜色
//获取存储浏览器中的值,没有则使用默认值
const activeId = ref(readLocal()[1]);
const changeColor = (id: string) => {
  activeId.value = id;
};
const sizeColor = computed(() => {
  return (id: string) => getSizeColor(activeId.value, dataLocal.menu, id);
});
</script>
<template>
  <div>
    <p
      class="flex items-center justify-between h-12 px-7 border-b"
      @click="switchActive"
    >
      <span class="text-xs font-semibold text-black">
        {{ data.menu || "默认标题" }}
      </span>
      <span :class="active ? 'rotate-180' : ''">
        <Img :img="Down" />
      </span>
    </p>

    <ul class="bg-header" v-show="data.active ? active : data.active">
      <a
        class="h-12 flex items-center justify-between px-7 border-b border-dashed last:border-none"
        v-for="item in data.list"
        :key="item.id"
        :href="item.url"
        @click="
          transfer(data.id, item.id), fatherSwitchActive(), changeColor(item.id)
        "
      >
        <p class="text-black text-sm font-normal" :style="sizeColor(item.id)">
          {{ item?.title || "默认标题" }}
        </p>
        <MenuTag :data="item.tag" />
      </a>
    </ul>
  </div>
</template>
<style scoped lang="less">

</style>
